创建物体的两个必要条件

  • 几何形状(Geometry)
  • 材质(Material)

几何形状

作用

储存一个物体的顶点信息。

基本几何形状

立方体(CubeGeometry)

1
2
3
4
5
6
7
8
9
10
new THREE.CubeGeometry(
    width,   // x方向上的长度
    height,  // y方向上的长度
    depth,   // z方向上的长度
    widthSegments,   // x方向切片数
    heightSegments,  // y方向切片数
    depthSegments    // z方向切片数
);
// 后三个参数为切片数，默认为1。
// 如不需要，可以不设置。

平面(PlaneGeometry)

并不是数学上无限大小的平面。

1
2
3
4
5
6
7
8
new THREE.PlaneGeometry(    
    width,  // x方向上的长度
    height, // y方向上的长度
    widthSegments,  // x方向切片数
    heightSegments  // y方向切片数
);
// 后两个参数为切片数，默认为1。
// 如不需要，可以不设置。

球体(SphereGeometry)

1
2
3
4
5
6
7
8
9
new THREE.SphereGeometry(
    radius,    // 半径
    segmentsWidth,  // 经度上的切片数
    segmentsHeight,  // 纬度上的切片数
    phiStart,    // 经度开始的弧度
    phiLegth,    // 经度跨过的弧度
    thetaStart,  // 纬度开始的弧度
    thetaLength  // 纬度跨过的弧度
);
球体
球体

圆形(CircleGeometry)

1
2
3
4
5
6
new THREE.CircleGeometry(
    radius,  // 半径
    segments,     // 切片数
    thetaStart,    // 开始弧度
    thetaLength    // 跨过的弧度
);

圆柱体(CylinderGeometry)

  • 正圆柱

  • 圆台

    1
    2
    3
    4
    5
    6
    7
    new THREE.CylinderGeometry(
     radiusTop,    // 顶面半径 
     radiusBottom, // 底面半径
     height,       // 高度
     radiusSegments,  // 纵向切片数
     heightSegments   // 横向切片数
    );

    正n面体

    • 正四面体(TetrahedronGeometry)
    • 正八面体(OctahedronGeometry)
    • 正十二面体(IcosahedronGeometry)
    1
    2
    3
    4
    new Three.xxxGeometry(
        radius, // 半径
        detail  // 细节层次，一般使用缺省
    );

圆环面(TorusGeometry)

它的形状类似于甜甜圈。

1
2
3
4
5
6
7
new THREE.TorusGeometry(
    radius,  // 圆环半径
    tube,    // 管道半径
    radialSegments,  // 纵切分段数
    tubularSegments, // 横切分段数
    arc  // 圆环面的弧度
);
圆环
圆环

圆环结(TorusKnotGeometry)

它的形状类似于打了结的甜甜圈。

1
2
3
4
5
6
7
8
9
THREE.TorusKnotGeometry(
    radius, // 圆环半径
    tube,   // 管道半径
    radialSegments,   // 纵切分段数
    tubularSegments,  // 横切分段数
    p,  // 控制样式的参数，一般缺省
    q,  // 控制样式的参数，一般缺省
    heightScale  // 在z轴方向上的缩放
)

自定义形状

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/*
 *自定义一个梯台
 */
// 初始化
var geometry = new THREE.Geometry();
// 顶部4顶点
geometry.vertices.push(new Victor3(-1, 2, -1));
geometry.vertices.push(new Victor3(1, 2, -1));
geometry.vertices.push(new Victor3(1, 2, 1));
geometry.vertices.push(new Victor3(-1, 2, 1));
// 底部4顶点
geometry.vertices.push(new Victor3(-2, 0, 2));
geometry.vertices.push(new Victor3(2, 0, -2));
geometry.vertices.push(new Victor3(2, 0, 2));
geometry.vertices.push(new Victor3(-2, 0, 2));

// 设置顶点连接情况
// 顶面
geometry.faces.push(new THREE.Face(0, 1, 2, 3));
// 底面
geometry.faces.push(new THREE.Face(4, 5, 6, 7));
// 四个侧面
geometry.faces.push(new THREE.Face(0, 1, 5, 4));
geometry.faces.push(new THREE.Face(1, 2, 6, 5));
geometry.faces.push(new THREE.Face(2, 3, 7, 6));
geometry.faces.push(new THREE.Face(3, 0, 4, 7));

材质

定义

材质是独立于物体顶点信息之外的与渲染效果相关的属性。

通过修改它，可以改变物体的颜色、纹理贴图、光照模式等。

种类

基本材质（MeshBasicMaterial）

使用基本材质的物体，渲染后不会由于光照产生明暗、阴影效果。

1
2
3
4
5
6
7
8
9
10
11
12
new THREE.MeshBasicMaterial(opt);
/**
 *opt可以缺省，也可以包含以下属性：
 *    visible：是否可见，默认为true
 *    side：渲染面为正面或反面
 *        正面：THREE.FrontSide(缺省)；
 *        反面：THREE.BackSide；
 *        双面:THREE.DoubleSide。
 *    wireframe：是否渲染线而非面，默认false
 *    color：十六进制RGB颜色
 *    map：使用纹理贴图
 */

Lambert材质（MeshLambertMaterial）

  • 符合Lambert光照模型的材质。
  • 只考虑漫反射而不考虑镜面反射。
1
2
3
4
5
6
7
8
9
new THREE.MeshLambertMaterial(opt);
/**
 *opt可以缺省，也可以包含以下属性：
 *    color：用来表现材质对散射光的反射能力，也是最常用来设置材质颜色的属性。
 *    ambient：对环境光的反射能力，
 *        只有当设置了AmbientLight后，该值才是有效的。
 *        材质对环境光的反射能力与环境光强相乘后得到材质实际表现的颜色。
 *    emissive：材质的自发光颜色
 */

其光照模型（了解即可）：

1
2
3
4
5
6
> Idiffuse = Kd * Id * cos(theta)
>   Idiffuse：漫反射光强。
>   Kd：物体表面的漫反射属性。
>   Id：光强。
>   theta：光的入射角弧度。
>

Phong材质（MeshPhongMaterial）

  • 既考虑漫反射又考虑镜面反射。
  • 其漫反射模型与Lambert相同。
1
2
3
4
5
6
7
8
9
new THREE.MeshPhongMaterial(opt);
/**
 *opt可以缺省，也可以包含以下属性：
 *    ambient：对环境光的反射能力，
 *        只有当设置了AmbientLight后，该值才是有效的。
 *    emissive：材质的自发光颜色
 *    specular：指定镜面反射系数
 *    shiniess：值越大光斑越小（高光系数n）
 */

Phong材质镜面反射光照模型（漫反射模型与Lambert相同）：

1
2
3
4
5
6
7
> Ispecular = Ks * Is * (cos(alpha))^n
>     Ispecular：镜面反射光强
>     Ks：材质表面镜面反射系数
>     Is：光源强度
>     alpha：反射光与视线的夹角
>     n：高光系数，值越大则高光系数越小
>

法向材质

  • 将材质的颜色设置为其法向量的方向。

    • 其材质颜色与照相机与该物体的角度相关。
1
new THREE.MeshNormalMaterial();

材质的纹理贴图

注意：贴图只有运行在服务器上才能显示出来。

1
2
3
4
5
6
7
// 创建纹理贴图
var texture = THREE.ImageUtils.loadTexture('../img/0.png');

// 将纹理贴图应用到材质上
var material = new THREE.MeshLambertMaterial({
    map:texture
});

有哪些物体？

  • 最常见：网格(Mesh)
  • 其他：线段(Line)、骨骼(Bone)、粒子系统(ParticleSystem)

如何创建物体？

创建物体时，需要指定几何形状和材质。

1
2
]// 如：创建一个网格
new THREE.Mesh(geometry, material);